<script lang="ts" setup>
import { Setting } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { ref, onUpdated } from 'vue'
const menu: any = [
  { id: 1, title: '工作台', navigator: '/home/workbench' },
  { id: 2, title: '创建文章', navigator: '/home/createarticle' },
  { id: 3, title: '文章管理', navigator: '/home/article' },
  { id: 4, title: '评论管理', navigator: '/home/comment' },
  { id: 5, title: '留言管理', navigator: '/home/message' },
  { id: 6, title: '管理员行为', navigator: '/home/manager' },
  { id: 7, title: '个人信息', navigator: '/home/information' },]
const router = useRouter();
// const route = router.currentRoute.value.fullPath
const path = ref(1)
const navigater = (menu: any) => {
  const { navigator } = menu;
  path.value = menu.id
  router.push(navigator ?? '/')
}

</script>

<template>
  <div class="layout_cont">
    <!-- <div :class="(item.navigator === path || item.navigator === 'workbench') -->
    <div v-for="item in menu" :class="item.id === path
      ? 'actived' : 'navigator'" @click="() => navigater(item)" :key="item.id">
      <!-- <el-button type="primary" size="large" :icon="Setting" link /> -->
      <span>{{ item.title }}</span>
    </div>

  </div>
</template>

<style lang="scss" scoped>
.layout_cont {
  height: calc(100vh - 150px);
  overflow-y: auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 70px;
}

.navigator {
  cursor: pointer;
  position: relative;
  width: 180px;
  height: 60px;
  margin-bottom: 10px;
  background-color: transparent;
  border: none;
  font-size: 16px;
  transition: .3s;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  transition: .3s;

  i {
    font-size: 20px;
    transition: .3s;
  }

  span {
    display: block;
    height: inherit;
    width: inherit;
    line-height: 60px;
    padding-left: 10px;
    font-weight: 100;
    transition: .3s;
    user-select: none;
  }

  &:last-child {
    margin-bottom: 0;
  }

  &::after {
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    left: 0;
    padding-left: 20px;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: transparent -3px -3px 15px 50px;
    transition: .3s;
  }

  &:hover::after {
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    left: 0;
    padding-left: 20px;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: #ededf398 -3px -3px 2px 2px;
  }

  &:hover {
    background: linear-gradient(to right, #e3e3f0, #eaeaf4);
    box-shadow: #dbdbdb 2px 2px 2px 2px;
  }

  &:hover i {
    transform: translateX(5px);
    color: #7b7bec;
  }

  &:hover span {
    transform: translateX(16px);
    color: #7b7bec;
    font-weight: 100;
  }

  &:active span {
    font-weight: 100;
    letter-spacing: .2em;
    text-indent: .5em;
  }
}

.actived {
  cursor: pointer;
  position: relative;
  width: 180px;
  height: 60px;
  margin-bottom: 10px;
  background-color: transparent;
  border: none;
  font-size: 16px;
  transition: .3s;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  background: linear-gradient(to right, #e3e3f0, #eaeaf4);
  box-shadow: #dbdbdb 2px 2px 2px 2px;
  color: #7b7bec;
  transition: .5s;

  &:hover {
    // color: red;
    transform: translateX(5px);
  }

  &:active span {
    font-weight: 100;
    letter-spacing: .2em;
    text-indent: .5em;
  }

  i {
    transform: translateX(5px);
    color: inherit;
  }

  span {
    font-weight: 100;
    transform: translateX(16px);
    color: inherit;
    transition: .3s;
    user-select: none;
  }

  &:last-child {
    margin-bottom: 0;
  }

  &::after {
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    left: 0;
    padding-left: 20px;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: #ededf398 -3px -3px 2px 2px;
  }

  &:hover::after {
    // box-shadow: #ededf398 -3px -3px 20px 20px;
    animation: breath 2s linear infinite;
  }

  @keyframes breath {
    0% {
      box-shadow: #ededf398 -3px -3px 2px 2px;
    }

    50% {
      box-shadow: #f9f9fa98 0px 0px 20px 20px;
    }

    100% {
      box-shadow: #ededf398 -3px -3px 2px 2px;
    }
  }
}
</style>